import menuApi from '@/api/menuApi'
import type { IAction, IModalProps } from '@/types/modal'
import type { MenuItem } from '@/types/munuType'
import { message } from '@/utils/AntdGlobal'
import { QuestionCircleOutlined } from '@ant-design/icons'
import { Form, Input, Modal, Radio, TreeSelect } from 'antd'
import { useEffect, useImperativeHandle, useState } from 'react'

const CreateMenu = (props: IModalProps<MenuItem | { parentId: string }>) => {
  const [visible, setVisible] = useState(false)
  const [action, setAction] = useState<IAction>('create')
  const [data, setData] = useState<MenuItem[]>([])
  const [form] = Form.useForm()
  useImperativeHandle(props.mRef, () => {
    return {
      open
    }
  })
  const getMenuList = async () => {
    const res = await menuApi.getMenuList()
    setData(res)
  }
  const open = (type: IAction, data?: MenuItem | { parentId: string }) => {
    setAction(type)
    setVisible(true)
    if (data) {
      form.setFieldsValue(data)
    }
  }
  const handleCancel = () => {
    setVisible(false)
    form.resetFields()
  }
  const handleSubmit = async () => {
    await form.validateFields()
    const params = form.getFieldsValue(true)
    if (action === 'create') {
      await menuApi.createMenu(params)
      message.success('创建成功')
    }
    if (action === 'edit') {
      await menuApi.editMenu(params)
      message.info('编辑成功')
    }
    props.update()
    handleCancel()
  }
  useEffect(() => {
    getMenuList()
  }, [])
  return (
    <Modal
      width={800}
      open={visible}
      title={action == 'create' ? '新增菜单' : '编辑菜单'}
      okText='确定'
      cancelText='取消'
      onOk={handleSubmit}
      onCancel={handleCancel}
    >
      <Form form={form} labelCol={{ span: 4 }} initialValues={{ menuType: 1, menuState: 1 }}>
        <Form.Item label='父级菜单' name='parentId'>
          <TreeSelect
            placeholder='请选择父级菜单'
            fieldNames={{ label: 'menuName', value: '_id' }}
            treeData={data}
          ></TreeSelect>
        </Form.Item>
        <Form.Item label='菜单类型' name='menuType' rules={[{ required: true, message: '请选择菜单类型' }]}>
          <Radio.Group
            options={[
              { value: 1, label: '菜单' },
              { value: 2, label: '按钮' },
              { value: 3, label: '页面' }
            ]}
          ></Radio.Group>
        </Form.Item>
        <Form.Item label='菜单名称' name='menuName' rules={[{ required: true, message: '请输入菜单名称' }]}>
          <Input placeholder='请输入菜单名称'></Input>
        </Form.Item>
        <Form.Item shouldUpdate noStyle>
          {() => {
            return form.getFieldsValue().menuType !== 2 ? (
              <>
                <Form.Item label='菜单图标' name='icon'>
                  <Input placeholder='请输入菜单图标'></Input>
                </Form.Item>
                <Form.Item label='路由地址' name='path'>
                  <Input placeholder='请输入路由地址'></Input>
                </Form.Item>
                <Form.Item label='组件地址' name='component'>
                  <Input placeholder='请输入组件地址'></Input>
                </Form.Item>
              </>
            ) : (
              <Form.Item label='权限标识' name='menuCode'>
                <Input placeholder='请输入权限标识'></Input>
              </Form.Item>
            )
          }}
        </Form.Item>
        <Form.Item
          name='orderBy'
          label=' 排序'
          tooltip={{ icon: <QuestionCircleOutlined />, title: '排序值越大越靠后' }}
        >
          <Input type='number'></Input>
        </Form.Item>
        <Form.Item label='菜单状态' name='menuState'>
          <Radio.Group
            options={[
              { label: '正常', value: 1 },
              { label: '停用', value: 2 }
            ]}
          ></Radio.Group>
        </Form.Item>
      </Form>
    </Modal>
  )
}

export default CreateMenu
